<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-20px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen flex flex-col items-center justify-center p-4 font-sans">
    <!-- 404错误页面容器 -->
    <div class="text-center max-w-3xl mx-auto">
        <!-- 404数字动画 -->
        <div class="relative mb-8">
            <span class="text-[120px] font-extrabold text-primary/20 animate-float">404</span>
            <span class="absolute top-0 left-0 text-[120px] font-extrabold text-primary text-shadow">404</span>
        </div>
        
        <!-- 错误信息 -->
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">页面未找到</h1>
        <p class="text-slate-600 text-lg mb-8 max-w-xl mx-auto">
            抱歉，您访问的页面不存在或已被移动。请检查您输入的网址是否正确，或返回主页继续浏览。
        </p>
        
        <!-- 导航按钮 -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <a href="/" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
                <i class="fa fa-home"></i>
                <span>返回主页</span>
            </a>
            <a href="javascript:history.back()" class="bg-white hover:bg-slate-50 text-slate-700 font-medium py-3 px-8 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg border border-slate-200 flex items-center justify-center gap-2">
                <i class="fa fa-arrow-left"></i>
                <span>返回上一页</span>
            </a>
        </div>
        
        <!-- 搜索框 -->
        <div class="max-w-md mx-auto mb-12">
            <p class="text-slate-500 mb-3">或者搜索其他内容：</p>
            <div class="flex">
                <input type="text" placeholder="输入关键词搜索..." class="flex-1 px-4 py-3 rounded-l-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-3 rounded-r-lg transition-all duration-300">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="text-slate-400 text-sm">
            <p>© 2023 您的网站名称. 保留所有权利.</p>
        </footer>
    </div>
    
    <!-- 装饰元素 -->
    <div class="absolute top-10 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
    <div class="absolute bottom-10 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
    
    <script>
        // 添加页面载入动画效果
        document.addEventListener('DOMContentLoaded', () => {
            document.body.classList.add('opacity-100');
            document.body.classList.remove('opacity-0');
        });
    </script>
</body>
</html>